<template>
 <div>
    <h1 >公司节点维护</h1>
   <el-form :inline="true" class="demo-form-inline" >
     <el-form-item label="姓名">
       <el-input v-model="studentQuery.name"></el-input>
     </el-form-item>


     <el-form-item >
       <el-button type="success" >查询</el-button>
       <el-button type="success" @click="addPage">新增</el-button>
     </el-form-item>
   </el-form>


   <el-table border :data="list" style="width:100%">
     <el-table-column label="编号" prop="id"   width="100px"></el-table-column>
     <el-table-column label="姓名" prop="name" ></el-table-column>
     <el-table-column label="年龄" prop="age" ></el-table-column>

     <el-table-column label="操作">
       <template slot-scope="x">
         <el-button type="warning" size="mini" @click="edit(x.$index,x.row)">编辑</el-button>
         <el-button type="danger" size="mini" @click="del(x.$index,x.row)">删除</el-button>
       </template>
     </el-table-column>
   </el-table>



   <!-- 编辑- 对话框组件 -->
   <el-dialog :visible.sync="isShow" width="30%" title="人员节点信息编辑">
     <el-form label-width="80px">
       <el-form-item label="编号">
         <el-input ></el-input>
       </el-form-item>
       <el-form-item label="姓名">
         <el-input ></el-input>
       </el-form-item>

       <el-form-item >
         <el-button type="success" size="mini">保存</el-button>
         <el-button type="success" size="mini">重置</el-button>
       </el-form-item>
     </el-form>
   </el-dialog>

   <!-- 新增- 对话框组件 -->
   <el-dialog :visible.sync="addShow" width="30%" title="人员节点信息新增">
     <el-form label-width="80px">
       <el-form-item label="编号">
         <el-input ></el-input>
       </el-form-item>
       <el-form-item label="姓名">
         <el-input></el-input>
       </el-form-item>
       <el-form-item >
         <el-button type="success" size="mini">保存</el-button>
         <el-button type="success" size="mini">重置</el-button>
       </el-form-item>
     </el-form>
   </el-dialog>


 </div>
</template>

<script>
    export default {
        name: "LIst",
        data(){
          return{
            studentQuery:{
              name:"",
              xueli:""
            },
            list:[
              {"id":1,"name":"张三","age":25},
              {"id":2,"name":"李四","age":24},
              {"id":3,"name":"王五","age":23}
            ],
            isShow:false, //编辑对话框是否显示
            addShow:false,//新增对话框是否显示

          }
        },
      methods:{
        edit:function(index,x){
          this.isShow = true;
          //数据回显
          this.form = x;
        },
        del:function(inde,x){

        },
        addPage:function(){
          this.addShow = true;
        },

      }
    }
</script>

<style scoped>

</style>
